<!-- 对话模式 -->
<template>
  <div class="shape"><div class="dot1"></div><div class="dot2"></div></div>
</template>

<script lang="ts" setup>
  
</script>

<style lang="scss" scoped>
/* 定义初始形状和动画 */
$w:10px;
$w2:5px;
$w1:-10px;
$time:2.6s;
.shape {
  width: $w;
  height: $w; position: relative;
  .dot1{
    border-left: $w2 solid transparent;
    border-right: $w2 solid transparent;
    border-bottom: $w solid var(--el-color-primary); position: absolute; left: 50%; top:50%;
    animation: shape-change1 $time infinite ease;
  }
  .dot2{
    width: $w; height: $w;opacity: 0;
    position: absolute; left: 50%; top:50%; background-color: var(--el-color-primary);
    animation: shape-change2 $time infinite ease;
    animation-delay: calc( $time * 1 ); border-radius:50%;
  }
  
}
@keyframes shape-change1 {
  0% { transform: rotate(0deg) scale(1); opacity: 1;}
  40% { transform: rotate(180deg) scale(0.2); opacity: 0.1; }
  60% { transform: rotate(180deg) scale(0); opacity: 0; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}
@keyframes shape-change2 {
  0% { transform: rotate(0deg) scale(0); opacity: 0.1;  }
  50% { transform: rotate(180deg) scale(1); opacity: 1; }
  100% { transform: rotate(0deg) scale(0); opacity: 0; }
}

</style>